<template>
    <div class="main">
        <el-header style="margin-top: 12px; min-width: 901px;">
            <span style=" margin-right: 15px;">编码:</span>
            <el-input style="width: 180px;" size="small" placeholder="请输入编码" v-model="queryInfo.code"></el-input>
            <span style="margin-left: 25px; margin-right: 15px;">名称:</span>
            <el-input style="width: 180px;height: 32px;" size="small" placeholder="请输入名称"
                v-model="queryInfo.name"></el-input>
            <el-button type="primary" size="small" style="margin-left: 15px;"
                @click="getassignmentList()">查询</el-button>
            <el-button size="small" @click="resetForm()">重置</el-button>
            <el-button type="text">展开</el-button>
        </el-header>
        <el-main style="padding: 0;">
            <el-row>
                <el-col :span="24">
                    <el-button type="text" style="padding: 0 15px;margin: 0 8px 8px 0;" @click="addList">新增</el-button>
                    <el-button type="text" style="padding: 0 15px;margin: 0 8px 8px 0;" @click="exportToExcel">导出</el-button>
                    <el-button type="text" style="padding: 0 15px;margin: 0 8px 8px 0;">导入</el-button>
                </el-col>
            </el-row>
            <!-- 数据渲染部分 -->
            <el-table :data="tableData" style="width: 100%" border>
                <!-- 自动生成序号 -->
                <el-table-column
                label="序号"
                type="index"
                :index="indexAdd"
                width="50"
              />
              
                <el-table-column label="编码" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.code }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="名称" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.addressInvoice }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="简称" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.shortName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="等级" width="80">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.supplierLevel_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="纳税规模" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.taxScale_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属地区" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.area }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="业务地域" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.bizArea }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属总公司" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.headquarters }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否启用" width="180">
                    <template slot-scope="scope">
                        <span v-show="scope.row.isEnabled == '1'">是</span>
                        <span v-show="scope.row.isEnabled != '1'">否</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)" >编辑</el-button>
                        <el-button type="danger" size="mini" @click="DeleteTi(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 添加或者编辑募捐团队模态框 -->
            <el-dialog :title="id ? '修改' : '新增'" :visible.sync="dialogFormVisible">
                <el-form :model="addassignment" ref="addassignment" label-width="100px" class="demo-ruleForm">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="任务编码" prop="code">
                                <el-input v-model="addassignment.code"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="任务名称" prop="name">
                                <el-input v-model="addassignment.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="简称">
                                <el-input v-model="addassignment.shortName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="客户级别">
                                <el-select v-model="addassignment.customerLevelId" placeholder="请选择">
                                    <el-option v-for="item in optionsA" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="纳税规模">
                                <el-input v-model="addassignment.taxScale"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="欠款限额">
                                <el-space>
                                    <el-input-number v-model="addassignment.arrearsLimit" controls-position="right" />
                                </el-space>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属总公司">
                                <el-input v-model="addassignment.headquarters"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属地区">
                                <el-input v-model="addassignment.area"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="业务区域">
                                <el-input v-model="addassignment.bizArea"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="客户网站">
                                <el-input v-model="addassignment.website"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="法人代表">
                                <el-input v-model="addassignment.corporate"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="法人电话">
                                <el-input v-model="addassignment.corporatePhone"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="客户地址">
                                <el-input v-model="addassignment.address"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="财务信息联系人">
                                <el-input v-model="addassignment.contactsFinancial"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="财务信息联系电话">
                                <el-input v-model="addassignment.phoneFinancial"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开票信息单位名称">
                                <el-input v-model="addassignment.unitInvoice"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开票信息开户行">
                                <el-input v-model="addassignment.bankInvoice"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开票信息行号">
                                <el-input v-model="addassignment.bankidInvoice"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开票信息税号">
                                <el-input v-model="addassignment.taxInvoice"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开票信息联系电话">
                                <el-input v-model="addassignment.phoneInvoice"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开票信息账号">
                                <el-input v-model="addassignment.accountInvoice"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开票地址">
                                <el-input v-model="addassignment.addressInvoice"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="办款资料单位名称">
                                <el-input v-model="addassignment.unitPayment"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="办款资料开户行">
                                <el-input v-model="addassignment.bankPayment"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="办款资料行号">
                                <el-input v-model="addassignment.bankidPayment"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="办款资料账号">
                                <el-input v-model="addassignment.accountPayment"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="收件信息地址">
                                <el-input v-model="addassignment.accountReceipt"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="收件信息邮编">
                                <el-input v-model="addassignment.postcodeReceipt"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="收件信息收件人">
                                <el-input v-model="addassignment.addressReceipt"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="收件信息联系电话">
                                <el-input v-model="addassignment.phoneReceipt"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="收件信息传真">
                                <el-input v-model="addassignment.faxReceipt"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="启用状态">
                                <el-select v-model="addassignment.isEnabled" placeholder="请选择">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="备注">
                                <el-input v-model="addassignment.remark"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button v-if="id" type="primary" @click="editForm()">修改</el-button>
                        <el-button v-else type="success" @click="addForm()">添加</el-button>
                        <el-button @click="resetForm()">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>


            <pagination :page="queryInfo.pageNo" :componentTotal="total" @changeRows="setRows" @changePage="setPage">
            </pagination>
        </el-main>
    </div>
</template>

<script>
import Pagination from "../Pagination";
import { excelExportUseJson } from "../../excel/xlsx.js";
export default {
    data() {
        return {
            id: '',
            visible: true,//删除的弹框
            dialogFormVisible: false,
            total: 0,
            queryInfo: {
                _t: new Date().getTime(),
                column: 'createTime',
                order: 'desc',
                code: '',
                name: '',
                field: 'id,billNo,billDate,customerId_dictText,isRubric_dictText,amt,checkedAmt,deductedAmt,billProcStatus_dictText,isApproved_dictText,isClosed_dictText,isVoided_dictText,remark,effectiveTime,approverId_dictText,flowId,createTime,createBy_dictText,sysOrgCode_dictText,updateTime,updateBy_dictText,action',
                pageNo: 1,
                pageSize: 10
            },

            //获取到的数据列表  
            tableData: [],
            addassignment: {
                "code": "编码",
                "name": "名称",
                "shortName": "简称",
                "supplierLevel": "1",
                "taxScale": "1",
                "headquarters": "所属总公司",
                "area": "所属地区",
                "bizArea": "业务区域",
                "alterSupplier": "备选供应商",
                "website": "网站",
                "corporate": "法人代表",
                "corporatePhone": "法人电话",
                "address": "供应商地址",
                "contactsFinancial": "财务信息联系人",
                "phoneFinancial": "财务信息联系电话",
                "unitInvoice": "开票信息单位名称",
                "bankInvoice": "开票信息开户行",
                "bankidInvoice": "开票信息行号",
                "taxInvoice": "开票信息税号",
                "phoneInvoice": "开票信息联系电话",
                "accountInvoice": "开票信息账号",
                "addressInvoice": "开票地址",
                "unitPayment": "办款资料单位名称",
                "bankPayment": "办款资料开户行",
                "bankidPayment": "办款资料行号",
                "accountPayment": "办款资料账号",
                "accountReceipt": "收件信息地址",
                "postcodeReceipt": "收件信息邮编",
                "addressReceipt": "收件信息收件人",
                "phoneReceipt": "收件信息联系电话",
                "faxReceipt": "收件信息传真",
                "isEnabled": 5,
                "remark": "备注"
            },
            options: [
                { value: '1', label: '是' },
                { value: '0', label: '否' }
            ],
            optionsA: [
                { value: '0', label: '一级' },
                { value: '1', label: '二级' }
            ],
            listHeader: {
                code:'编码',
                addressInvoice:'名称',
                shortName:'简介'
            },
        }
    },
    methods: {
                //导出EXCEL
                exportToExcel() {
            let formatList = this.tableData
            excelExportUseJson(formatList, this.listHeader, "供应商");
        },






        //查询数据渲染列表
        async getassignmentList() {
            const { data: res } = await this.axios.get("bas/basSupplier/list", {
                params: this.queryInfo,
            });
            if (res.code != 200) return this.$message.error(res.message);
            this.tableData = res.result.records;
            this.total = res.result.total;
        },
        //初始化数据
        addList() {
            this.addassignment = {
                "code": "",
                "name": "",
                "shortName": "",
                "customerLevelId": "",
                "taxScale": "",
                "arrearsLimit": 0,
                "headquarters": "",
                "area": "",
                "bizArea": "",
                "website": "",
                "corporate": "",
                "corporatePhone": "",
                "address": "",
                "contactsFinancial": "",
                "phoneFinancial": "",
                "unitInvoice": "",
                "bankInvoice": "",
                "bankidInvoice": "",
                "taxInvoice": "",
                "phoneInvoice": "",
                "accountInvoice": "",
                "addressInvoice": "",
                "unitPayment": "",
                "bankPayment": "",
                "bankidPayment": "",
                "accountPayment": "",
                "accountReceipt": "",
                "postcodeReceipt": "",
                "addressReceipt": "",
                "phoneReceipt": "",
                "faxReceipt": "",
                "isEnabled": "1",
                "remark": ""
            };
            this.dialogFormVisible = true;
        },
        //新增数据
        async addForm() {
            const { data: res } = await this.axios.post("bas/basSupplier/add", this.addassignment);
            if (res.code != 200) return this.$message.error("新增录入失败");
            this.$message.success("新增录入成功");
            this.dialogFormVisible = false;
            this.getassignmentList();
        },
        //编辑---【数据回显】
        handleEdit(row) {
            // console.log(index, row);
            this.id = row.id;
            this.addassignment = row;
            this.dialogFormVisible = true;
        },
        //编辑数据
        async editForm() {
            const { data: res } = await this.axios.put("bas/basSupplier/edit", this.addassignment);
            if (res.code != 200) return this.$message.error("编辑失败");
            this.$message.success("编辑成功");
            this.dialogFormVisible = false;
            this.getassignmentList();
        },
        //删除提示操作
         DeleteTi(row) {
            this.$confirm(`此操作将永久删除该数据, 是否继续?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.handleDelete(row.id);
            });
        },
        //删除操作
       async handleDelete(id) {
            const { data: res } = await this.axios.delete(`bas/basSupplier/delete`,{
                params: { id: id }
            });
            if (res.code != 200) return this.$message.error("删除失败");
            this.$message.success("删除成功");
            this.getassignmentList();
        },
        //重置数据
        resetForm() {
            this.queryInfo = {
                _t: new Date().getTime(),
                column: 'createTime',
                order: 'desc',
                code: '',
                name: '',
                field: 'id,billNo,billDate,customerId_dictText,isRubric_dictText,amt,checkedAmt,deductedAmt,billProcStatus_dictText,isApproved_dictText,isClosed_dictText,isVoided_dictText,remark,effectiveTime,approverId_dictText,flowId,createTime,createBy_dictText,sysOrgCode_dictText,updateTime,updateBy_dictText,action',
                pageNo: 1,
                pageSize: 10
            };
            this.getassignmentList()
        },
        // 分页器
        setRows(val) {
            this.queryInfo.pageSize = val;
            this.getassignmentList();
        },
        setPage(val) {
            this.queryInfo.page = val;
            this.getassignmentList();
        },
        //自动增加序号
        indexAdd(index) {
            const page = this.queryInfo.pageNo // 当前页码
            const pagesize = this.queryInfo.pageSize // 每页条数
            return index + 1 + (page - 1) * pagesize
    	}
    },
    mounted() {
        this.getassignmentList();
    },
    components: {
        Pagination
    }
}
</script>

<style lang="scss" scoped></style>